<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mail</title>
<link rel="stylesheet" th:href="@{/easy/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
</head>
<body class="bg-c">
	<div class="container-fluid" ms-controller="vm">
		<div class="row">
			<div style="font-size: 18px;"
				class="col text-center bg-primary text-white">通讯录</div>
		</div>
		<div class="row mt-2">
			<div class="col"></div>
			<div class="col"></div>
			<div class="col">
				<div class="form-inline">
					<input id="value" class="form-control form-control-sm" />
					<button class="btn btn-sm btn-primary ml-1" onclick="showCon(0)">
						<i class="fa fa-search mr-1" aria-hidden="true"></i>查找
					</button>
					<button class="btn btn-sm btn-primary ml-1" onclick="addCon()">
						<i class="fa fa-plus mr-1" aria-hidden="true"></i>添加联系人
					</button>
				</div>
			</div>
		</div>
		<div class="row mt-1">
			<div class="col">
				<div>
					<span style="color: maroon; font-size: 18px; font-weight: bold;">全部</span>
				</div>
			</div>
		</div>
		<div class="row mt-2">
			<div class="col">
				<table class="table table-striped">
					<tr class="text-center">
						<td style="width: 15%">联系人编号</td>
						<td class="text-left">联系人</td>
						<td style="width: 35%">加入时间</td>
						<td style="width: 25%">操作</td>
					</tr>
					<tr ms-for="s in @list" class="text-center">
						<td style="width: 15%">{{s.fri_id}}</td>
						<td class="text-left">{{s.fri_account}}</td>
						<td style="width: 35%">{{s.createtime|date("yyyy-MM-dd
							HH:mm:ss")}}</td>
						<td style="width: 25%"><a class="text-danger" title="删除"
							ms-attr="{rowid:s.id}" onclick="del(this)"><i
								class="fa fa-trash" aria-hidden="true"></i></a></td>
					</tr>
				</table>
				<!-- 分页 -->
				<div class="row mt-2">
					<div class="col"></div>
					<div class="col">
						<!-- 分页按钮 -->
						<div class="footer">
							<ul class="pagination" id="pager"></ul>
						</div>
					</div>
					<div class="col"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- js -->
	<script th:src="@{/easy/js/jquery.js}"></script>
	<script th:src="@{/easy/js/avalon.js}"></script>
	<script th:src="@{/page/jqpaginator.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script>
		var vm = avalon.define({
			$id : "vm",
			list : [],
			pageNum : "1",
			total : 1,
		});
		//addCon
		function addCon() {
			layer.open({
				title : "添加联系人",
				type : 2,
				area : [ "60%", "70%" ],
				content : "/mona/Contacts/toAddCon",
				end : function() {
					showCon(1);
				}
			});
		}
		//--分页
		$("#pager").jqPaginator({
			totalPages : 10,
			visiblePages : 5,
			currentPage : 1,
			onPageChange : function(num, type) {
				vm.pageNum = num;
				showCon();
			}
		});

		function showCon(num) {
			if (num == 0) {
				vm.pageNum = 1;
				$("#pager").jqPaginator("option", {
					currentPage : 1
				});
			}
			$.post("/mona/Contacts/findAll", {
				pageNum : vm.pageNum,
				pageSize : "6",
			}, function(data) {
				$("#pager").jqPaginator("option", {
					totalPages : data.totalPages
				});
				vm.list = data.content;
			}, "json");
		}
		//-- 查找联系人
		$("#value").bind("input propertychange", function() {
			$.post("/mona/Contacts/showConByKey", {
				key : $("#value").val()
			}, function(data) {
				vm.list = data;
			});
		});
		//-- del删除联系人
		function del(obj) {
			layer.confirm("确认删除吗?", function() {
				$.post("/mona/Contacts/del", {
					id : $(obj).attr("rowid")
				}, function(data) {
					showCon(1);
					layer.msg(data);
					setTimeout("location.reload();", 1000);
				});
			});
		}
	</script>
</body>
</html>